<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>
<body>

<div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#Catalog").hide().fadeIn();
        });

        function sendCode(){
            var memPhone = $("#memPhone").val();
            if(memPhone == '' || memPhone.length != 11){
                layer.msg("请输入正确的手机号！");
                return;
            }else{
                $.ajax({
                    type: 'GET',
                    url: '/fitness/code',
                    data: {
                        memPhone : memPhone
                    },
                    dataType: 'json',
                    success: function(data) {
                        if(data){
                            timer(60);
                        }else{
                            layer.msg("获取验证码失败");
                        }
                    },
                    error: function(data) {
                        layer.msg('连接超时！');
                    },
                });
            }
        }


        //倒计时
        function timer(wait) {
            if(wait == 0){
                $("#sendBtn").val("获取验证码");
                $("#sendBtn").removeAttr("disabled");
                wait = 60;
            }else{
                $("#sendBtn").attr("disabled","true");
                $("#sendBtn").val(wait + "秒后重发");
                wait--;
                setTimeout(function() {timer(wait)}, 1000);
            }
        }

    </script>
</div>
<div id="Catalog">
    <div th:replace="common/top">
    </div>

    <form action="#" th:action="@{/account/codeSignOn}" th:object="${account}" method="get">
        <br>
        <br>
        <br>


        <table>
            <tr>
                <td>手机号:</td>
                <td>
                    <input class="input-sign" id="memPhone" type="text" name="memPhone" placeholder="手机号" >
                    <div id="usernameInfo"></div>
                    <input type="button" value="发送验证码" id="sendBtn" onclick="sendCode()">
                </td>
            </tr>
            <tr>
                <td>验证码:</td>
                <td><input class="input-sign" id="code" type="text" name="code" placeholder="验证码"></td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <font color="#FF6984" th:text="${msg}">${requestScope.msg}</font>
                </td>
            </tr>
        </table>
        <input type="submit" name="/account/signon" value="Login">
    </form>

    Need a user name and password? <a href="newAccountForm">Register Now!</a>
    <div th:replace="common/bottom">

    </div>
</div>

</body>
</html>